<template>
  <div v-if="props.data?.name" class="box">
    <a-button class="text">{{ props.data?.name }}</a-button>
    <div class="child">
      <div v-if="child?.length" class="child-item">
        <template v-if="child?.length > 1 && child[0]?.id === child[1]?.id">
          <ControlModal :data="child[0]" />
        </template>
        <template v-else>
          <template v-for="childItem in child" :key="childItem">
            <ControlModal :data="childItem" />
          </template>
        </template>
      </div>
    </div>
  </div>
  <!-- <div>{{ child}}</div> -->
</template>
<script setup lang="ts">
import { list } from "../data";

const props = withDefaults(
  defineProps<{
    source?: any;
    // details?:any
    data: { name?: any; details: any };
  }>(),
  {}
);
const child = computed(() => {
  let temps: any = [];
  if (typeof props.data?.details !== "object" || !props.data.details.length)
    return [];
  props.data.details.forEach((element: any) => {
    let item = list.find((ele) => ele.id === element.next);
    temps.push(item);
  });

  return temps;
});

// console.log(list);
</script>
<style lang="less" scoped>
.box {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 10px;
  justify-content: flex-start;
}

.child {
  display: flex;
  // flex-direction: column;
  justify-content: flex-start;

  .child-item {
    display: flex;
    justify-content: flex-start;
  }
}
</style>
